<!--
 * @Project_description: 导航组件
-->
<style lang="scss" scoped>
//@import url(); 引入公共css类
.menu-vertical {
  max-height: calc(100vh - 60px);
}

::v-deep .el-menu-item.is-active {
  background-color: var(---bg-active-color) !important;
  border-radius: var(--borderRadius) !important;
}

::v-deep .el-menu-item:hover {
  background-color: var(---hover-bg-active-color) !important;
  border-radius: var(--hover-borderRadius) !important;
  color: var(---hover-color) !important;
}
</style>
<template>
  <el-menu :default-active="active" v-bind="$attrs" class="menu-vertical" :style="{
    '---bg-active-color': bgActiveColor,
    '--borderRadius':borderRadius,
    '---hover-bg-active-color': hoverBgColor,
    '--hover-borderRadius':hoverBorderRadius,
    '---hover-color': hoverColor
  }">
    <template v-for="item in resData">
      <el-submenu v-if="item.children" :index="item.path" :key="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.pageName }}</span>
        </template>
        <menu-item :menu-data="item.children" v-bind="$attrs"/>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :disabled="item.disabled" :key="item.path">
        <i :class="item.icon"></i>
        <span>{{ item.pageName }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
// import引入的组件需要注入到对象中才能使用
import MenuItem from "./MenuItem.vue"

export default {
  name: 'NavMenu', //文件名
  components: {MenuItem}, //组件
  props: {
    data: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    bgActiveColor: {
      type: String,
      default: '#d9e3f6'
    },
    borderRadius: {
      type: String,
      default: ''
    },
    hoverColor: {
      type: String,
      default: '#fff'
    },
    hoverBgColor: {
      type: String,
      default: 'skyblue'
    },
    hoverBorderRadius: {
      type: String,
      default: ''
    },
  }, // props
  data() {
    // 这里存放数据
    return {
      active: '1',
      attr: {},
    }
  },
  computed: {
    resData() {
      if (!this.$attrs.isDynamic) {
        return this.data
      } else {
        let data = JSON.parse(window.localStorage.getItem(this.$attrs.dynamicNavName ? this.$attrs.dynamicNavName : '权限树'))
        return this.getRoutes(data)
      }
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        console.log('to.path', to.path)
        this.active = to.path
      },
      immediate: true
    },
    data: {
      handler(n, o) {
        if (n !== o) {
          console.log('data', n)
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    getRoutes(data) {
      this.$tree.foreach(data, function (item) {
        if (item.类型 != '2') {
          item.path = item.链接地址 || '';
          item.name = item.链接地址 || '';
          item.hidden = item.是否隐藏 || false;
          item.pageName = item.名称 || '';
          item.icon = item.图标 || '';
          item.meta = {title: item.名称 || ''};
          item.children = item.子权限 || [];

          if (item.类型 != '0') {
            delete item.children;
          }
        }
      }, {
        strategy: "pre",
        childrenKey: '子权限'
      });
      return data;
    }
  }
}
</script>
